<template>
  <el-container class="mian-nav">
    <el-header>
      <div class="header-left" :style="'width:'+asideWith">
        <el-image v-if="!isCollapse" :src="require('@/assets/logo.png')"></el-image>
        <el-image v-else :src="require('@/assets/logo-small.png')"></el-image>
      </div>
      <div class="header-center">
        <i id="asideicon" :class="isCollapse? 'el-icon-right':'el-icon-back'" @click="changeAsideWith"></i>
        <span>欢迎来到子昂酒店后台管理系统</span>
      </div>
      <div class="header-right">
        <el-avatar :src="getUserInfo?getUserInfo.avatar:''"></el-avatar>
        <el-dropdown style="cursor: pointer">
          <span class="el-dropdown-link" >
            {{getUserInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <router-link to="/admin/userinfo"><span @click="goUserinfo">个人中心</span></router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="logout" @click="logout">退出登录</span>
      </div>
    </el-header>
    <el-container>
      <el-aside width="auto">
        <side-menu :aside-with="asideWith" :is-collapse="isCollapse"/>
      </el-aside>
      <el-main>
        <edi-table/>
        <!--子路由-->
        <router-view style="margin-bottom: 50px"/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import SideMenu from "@/components/common/menu/SideMenu";
import EdiTable from "@/components/common/editable/EdiTable";
import {getWebSocketMessage, initWebSocket, websocketClose, websocketonmessage} from "@/utils/websocket";
import {baseWsIP} from "@/network/request";
export default {
  name: "Admin",
  components: {EdiTable, SideMenu,},
  data() {
    return {
      isCollapse: false,//是否收起菜单
      asideWith: '208px',
      userInfo:{},//用户信息
      websock:null,
    };
  },
  methods: {
    //改变宽度 收缩/打开侧边栏
    changeAsideWith(){
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse){
        this.asideWith = '60px'
      }else {
        this.asideWith = '208px'
      }
    },
    //个人中心editmenu显示处理
    goUserinfo(){
      if (this.$route.path !== 'userinfo')
        this.$store.commit('addTab',{name:'userinfo',title:'个人中心'})
    },
    logout(){
      this.$store.dispatch('logout')
      this.$router.push("/")
    },
    initWebSocket () {
      this.websock = new WebSocket(baseWsIP());
      this.websock.onmessage = this.websocketonmessage
      this.websock.onerror = this.websocketonerror
      this.websock.onopen = this.websocketonopen
      this.websock.onclose = this.websocketclose
    },
    websocketonopen () { // 连接建立之后执行send方法发送数据，这个和自己的后端沟通好需要传什么数据，我的是要进行token验证
      let token = sessionStorage.getItem('token');
      let data = {
        type: "REGISTER",
        data: {token:token}
      }
      // this.websock.send(JSON.stringify(data));
      this.websock.send("connection");
    },
    websocketonerror () { //连接错误
      console.log( 'WebSocket连接失败')
    },
    websocketonmessage (e) { // 数据接收
      console.log(e.data);
    },
    websocketclose (e) {  // 关闭连接
      console.log('已关闭连接', e)
    },
  },
  computed:{
    getUserInfo(){
      return this.$store.getters.getUserInfo
    }
  },
  created() {
    // initWebSocket()
    // this.initWebSocket()
  },
  destroyed() {
    // this.websocketclose()
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #333333;
}
.mian-nav {
  height: 100%;
  width: 100%;
  position:absolute;
  left: 0;
  bottom:0;
}

.el-header {
  padding: 0;
  margin: 0;
}
.el-header, .el-footer {
  background-color: skyblue;
  color: #333;
  line-height: 60px;
}
.el-main {
  position: relative;
  padding: 0;
  margin: 20px 20px 0 20px;
  color: #333;
}
.header-left {
  float: left;
  height: 100%;
  background-color: white;
}
.header-center {
  float: left;
}
.header-center #asideicon {
  float: left;
  margin: 0 10px;
  font-size: 35px;
  line-height: 60px;
  color: aliceblue;
}
.header-center #asideicon:hover {
  color: #00a4ff;
}
.header-center h2 {
  margin: 0;
}
.header-right {
  float: right;
  width: 210px;
  margin-right: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#asideicon {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.logout {
  cursor: pointer;
}
</style>